<template>
  <div class="card h100">
    <div class="title">
      <span>设备</span>
    </div>
    <div class="content h100">
      <echarts
        :chart-data="totalFailureChartOptions"></echarts>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        systemData: [],
        totalNum: 0
      }
    },
    computed: {
      // 总故障
      totalFailureChartOptions() {
        return {
          color: ['#409eff'],
          hasData: true,
          grid: {
            left: '3%',
            right: '3%',
            bottom: 0,
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }]
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
    @import "./common.scss";
    .card{
      .title{
        display: flex;
        justify-content: space-between;
      }
      .btn-active{
        background: #0BB976;
        color: #fff;
      }
    }
    .content{
      padding: 0 10px;
      height: calc(100% - 100px);
    }
    .content-info{
      overflow: auto;
      height:30%;
      &>div{
        min-width: 150px;
        background: #F2F2F7;
        float: left;
        padding:8px 10px;
        @include border;
        margin-right: 20px;
        line-height: 30px;
        margin-bottom: 10px;
        &>b{
          color: #FF3A30;
        }
        &>p{
          color: #B4B4C8;
          margin: 0;
        }
      }
    }
    .conten-chart{
      margin: 15px 0 20px;
      // .chart-box{
      //   height: 180px;
      // }
    }
</style>
